<template>
	<view class="content">
		<view class="stateBox" v-if="status==1">
			<image :src="baseUrl+'img/my/5.png'" class="icon"></image>
			<text class="label">待服务</text>
		</view>
		<view class="stateBox" v-if="status==2">
			<image :src="baseUrl+'img/my/6.png'" class="icon"></image>
			<text class="label">服务中</text>
		</view>
		<view class="line">
		</view>
		<view class="infoBox">
			<view class="item">
				<text>订单编号：</text>
				<text>{{data.code}}</text>
			</view>
			<view class="item">
				<text>订单类型：</text>
				<text>{{data.serve_name}}</text>
			</view>
			<view class="item">
				<text>数量：</text>
				<text>{{data.num}}</text>
			</view>
			<view class="item">
				<text>下单时间：</text>
				<text>{{data.created_at}}</text>
			</view>
			<view class="item">
				<text>上门时间：</text>
				<text>{{data.service_data}}/{{data.service_time}}</text>
			</view>
			<view class="item">
				<text>服务地址：</text>
				<text>{{user.floor_house_num}}</text>
			</view>
			<view class="item">
				<text>实付款：</text>
				<text>{{data.amount}}</text>
			</view>
			<view class="item">
				<text>备注：</text>
				<text>{{data.remark || ''}}</text>
			</view>
		</view>
		<view class="line">
		</view>
		<view style="position: relative;">
			<view class="pay" v-if="admin==2">
				修改进度
			</view>
			<view class="pay" v-else @click="$navto.navto('/pages/myorder_modify/myorder_modify', {id: id})">
				修改订单
			</view>
			<view class="selecteType" @click.stop>
				<uni-data-select v-mode="typeValue" :localdata="type" @change="changeType" />
				</uni-data-select>
			</view>
		</view>
		<view class="cancel" @click="cancel" v-if="adminStatus==1">
			取消订单
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false,
				baseUrl: this.$baseUrl,
				id: '',
				data: '',
				user: '',
				status: '',
				admin: 1, //2为管理员进来
				adminStatus: 1, //2的话隐藏取消
				typeValue: '',
				fullType: [{
						value: 0,
						text: '服务中',
						num: 2
					},
					{
						value: 1,
						text: '已完成',
						num: 3
					}
				],
				type: [], // 动态选项
				majordomo_id: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.admin = options.admin;
			this.status = options.status;
			this.adminStatus = options.adminStatus;
			this.majordomo_id = options.majordomo_id;
			console.log("状态" + this.adminStatus)
			this.updateTypeOptions(this.adminStatus);
			this.$request.get(`orderRead?id=${this.id}`).then(res => {
				this.data = res.data.data;
			})
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
		},
		methods: {
			updateTypeOptions(adminStatus) {
				if (adminStatus == 1) {
					// 待服务 - 只显示"服务中"选项
					this.type = [this.fullType[0]];
				} else if (adminStatus == 2) {
					// 服务中 - 只显示"已完成"选项，但value改为0
					this.type = [{
						...this.fullType[1], // 保留其他属性
						value: 0 // 覆盖value为0
					}];
				}
				this.typeValue = ''; // 重置选择值
			},
			changeType(e, id) { //修改订单
				console.log("e:", e);
				console.log("id:", id);
				if (this.adminStatus == 2) {
					this.typeValue = this.type[0].text;
				} else {
					this.typeValue = this.type[e].text;
				}
				this.$request.post(`notif_handle`, {
					majordomo_id: this.majordomo_id,
					notif_id: this.id,
					notif_status: this.type[e].num,
				}).then(res => {
					if (res.data.code == 10000) {
						this.$toast('修改成功');
						setTimeout(() => {
							// 返回前设置数据
							getApp().globalData.returnData = {
								id: this.id,
								back: 1,
								type: 1
							};
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					} else {
						this.$toast('修改失败');
					}
					console.log(res);
				});
			},
			//取消
			cancel() {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该订单',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`cancelOrder?id=${this.id}&type=cancel`).then(res => {
								if (res.data.code == 10000) { // 更新购物车
									this.$toast('取消成功');
									setTimeout(() => {
										// 返回前设置数据
										getApp().globalData.returnData = {
											id: this.id,
											back: 1,
											type:1
										};
										uni.navigateBack({
											delta: 1
										});
									}, 1000)
								} else {
									this.$toast('取消失败');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		border: none;
		height: 45px;
	}

	::v-deep .uni-select .uni-icons {
		display: none;
	}

	::v-deep .uni-select__input-box {
		opacity: 0 !important;
	}

	.selecteType {
		position: absolute;
		left: 40rpx;
		width: 670rpx;
		height: 90rpx;
		top: 0;
		// opacity: 0;
	}

	.pay {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 165rpx;
		margin-left: 40rpx;
	}

	.cancel {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #121212;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		margin-left: 40rpx;
		border: 1rpx solid #121212;
		box-sizing: border-box;
		/* 关键属性 */
	}

	.infoBox {
		margin-top: 95rpx;

		.item {
			padding-left: 40rpx;
			padding-right: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #121212;
			letter-spacing: 5rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;

			text {
				word-wrap: break-word;
				word-break: break-all;
				max-width: 500rpx;
			}
		}
	}

	.line {
		width: 670rpx;
		height: 1rpx;
		background: #010101;
		margin-top: 80rpx;
		margin-left: 40rpx;
	}

	.stateBox {
		display: flex;
		margin-top: 100rpx;
		align-items: center;

		.label {
			font-weight: 700;
			font-size: 32rpx;
			color: #121212;
			letter-spacing: 6rpx;
			margin-left: 18rpx;
		}

		.icon {
			width: 64rpx;
			height: 64rpx;
			margin-left: 278rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}
</style>